<template>
  <a-modal
    class="formModal editor"
    :title="$t('form.updateIntention.title')"
    v-model:open="modalVisible"
    @cancel="close"
    :footer="null"
  >
    <a-form ref="formRef" :layout="'vertical'" :model="formState">
      <a-form-item
        :label="$t('form.updateIntention.form.item_1.label')"
        name="salary_expectation"
        :rules="[
          {
            required: true,
            message: $t('form.updateIntention.form.item_1.rules.error_1'),
            trigger: 'blur',
          },
        ]"
      >
        <a-input
          :maxlength="50"
          v-model:value.trim="formState.salary_expectation"
          :placeholder="$t('form.updateIntention.form.item_1.rules.error_1')"
          allowClear
        ></a-input>
      </a-form-item>
      <a-form-item
        :label="$t('form.updateIntention.form.item_2.label')"
        name="birthday"
        :rules="[
          {
            required: true,
            message: $t('form.updateIntention.form.item_2.rules.error_1'),
            trigger: 'blur',
          },
        ]"
      >
        <a-date-picker
          v-model:value="formState.birthday"
          value-format="YYYY-MM-DD"
          :placeholder="$t('form.updateIntention.form.item_2.rules.error_1')"
          :allowClear="false"
        />
      </a-form-item>
      <a-form-item
        :label="$t('form.updateIntention.form.item_3.label')"
        name="position_name"
        :rules="[
          {
            required: true,
            message: $t('form.updateIntention.form.item_3.rules.error_1'),
            trigger: 'blur',
          },
        ]"
      >
        <a-input
          :maxlength="50"
          v-model:value.trim="formState.position_name"
          :placeholder="$t('form.updateIntention.form.item_3.rules.error_1')"
          allowClear
        ></a-input>
      </a-form-item>
      <a-form-item
        :label="$t('form.updateIntention.form.item_7.label')"
        name="address"
        :rules="[
          {
            required: true,
            message: $t('form.updateIntention.form.item_4.rules.error_1'),
            trigger: 'blur',
          },
        ]"
      >
        <a-input
          :maxlength="50"
          v-model:value.trim="formState.address"
          :placeholder="$t('form.updateIntention.form.item_7.rules.error_1')"
          allowClear
        ></a-input>
      </a-form-item>
      <a-form-item
        :label="$t('form.updateIntention.form.item_6.label')"
        name="objective"
        :rules="[
          {
            message: $t('form.updateIntention.form.item_6.rules.error_1'),
            trigger: 'blur',
          },
        ]"
      >
        <div style="min-width: 1px" class="flex-1">
          <Editor
            type="modal"
            class="editor"
            v-model="formState.objective"
            :placeholder="$t('form.updateIntention.form.item_6.rules.error_1')"
          />
        </div>
      </a-form-item>
    </a-form>
    <div class="footer-btns">
      <a-button @click="close">{{ $t("btnText.cancel") }}</a-button>
      <a-button type="primary" :loading="isSubmitting" @click="submit">{{
        $t("btnText.save")
      }}</a-button>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { getCurrentInstance, inject, ref } from "vue";
import type { IntentionEditParams, IntentionItem } from "../../types/profile";
import { useMemberStore } from "../../store";
import { postMemberIntentionEdit } from "../../api/profile";
import { message } from "ant-design-vue";
const memberStore = useMemberStore();

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const props = defineProps<{
  data: IntentionItem;
}>();

const modalVisible = ref(false);
const close = () => {
  modalVisible.value = false;
  formRef.value = {
    salary_expectation: "",
    birthday: "",
    position_name: "",
    address: "",
    personal_label: "",
    objective: "",
    entry_time: "",
  };
};
const show = () => {
  formState.value = {
    salary_expectation: props.data.salary_expectation || "",
    birthday: props.data.birthday || "",
    position_name: props.data.position_name || "",
    address: props.data.address || "",
    personal_label: props.data.personal_label || "",
    objective: props.data.objective || "",
    entry_time: formatDate(props.data.entry_time) || "",
  };
  modalVisible.value = true;
};

defineExpose({
  close,
  show,
});

// ===============form state================
const formRef = ref();

const formState = ref<IntentionEditParams>({
  salary_expectation: "",
  birthday: "",
  position_name: "",
  address: "",
  personal_label: "",
  objective: "",
  entry_time: "",
});
const { locale } = useI18n();
const lang = inject("lang");
const emits = defineEmits(["complete"]);
const isSubmitting = ref(false);
const submit = () => {
  formRef.value.validate().then(async () => {
    isSubmitting.value = true;
    let res = await postMemberIntentionEdit({
      ...formState.value,
      lang: lang.value,
    });
    isSubmitting.value = false;
    if (res.code === 200) {
      message.success($t("message.changed_success"));
      emits("complete");
      close();
    } else {
      message.error($t("message.error.update"));
      close();
    }
  });
};
</script>
<style scoped lang="less"></style>
